<template>
  <div class="app-container">
    <!-- 搜索框 -->

    <SearchBar :show-search="true">

      <template slot="peopleSearch">
        <el-form-item label="人员搜索：">
          <el-row type="flex">
            <el-input v-model="searchName" placeholder="请输入" style="width: 300px;" />
          </el-row>
        </el-form-item>

      </template>
      <!-- 角色插槽 -->
      <template slot="roleSelect">
        <el-row type="flex">
          <el-col :span="18">
            <el-form-item label="角色：" class="el-form-item__content">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in roleList"
                  :key="item.roleCode"
                  :label="item.roleName"
                  :value="item.roleName==='维修员'"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" class="CXButton" @click="searchUserPeople"><i class="el-icon-search" /> 查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </template>

    </SearchBar>

    <!-- 表格列表 -->
    <el-card v-loading="loading">
      <!-- 表格表单 -->
      <el-row>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%; "
          :header-cell-style="{color:'#333744',background:'rgb(243, 246, 251)'}"
        >
          <!-- 序号 -->
          <el-table-column
            prop="index"
            label="序号"
            width="180"
          />
          <!-- 人员名称 -->
          <el-table-column
            prop="userName"
            label="人员名称"
            width="180"
          />
          <!-- 角色 -->
          <el-table-column
            prop="roleName"
            label="角色"
          />
          <!-- 联系电话 -->
          <el-table-column
            prop="mobile"
            label="联系电话"
          />
          <!--  完成工单(本月)-->
          <el-table-column
            prop="workCount"
            label="完成工单(本月)"
          />
          <!-- 进行中工单 -->
          <el-table-column
            prop="progressTotal"
            label="进行中工单"
          />
          <!-- 拒绝工单(本月) -->
          <el-table-column
            prop="cancelCount"
            label="拒绝工单(本月)"
          />
          <!-- 操作 -->
          <el-table-column
            label="操作"
            width="100"
          >
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="ViewDetails(row.userId)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig.pageSize"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 模态框 -->
    <el-dialog
      title="人员详情"
      :visible="showDialog"
      width="600px"
      @close="closeDialog"
    >
      <div class="detailsBox">
        <el-row type="flex" class="detailBox">
          <el-col>
            人员名称：{{ userInfo.userName }}
          </el-col>
          <el-col>
            角色：{{ userInfo.roleName }}
          </el-col>
          <el-col>
            联系电话：{{ userInfo.mobile }}
          </el-col>
        </el-row>
        <el-row class="detailBox">
          <el-col>
            负责区域：{{ userInfo.regionName }}
          </el-col>
        </el-row>
      </div>
      <!-- 底部表格 -->
      <div class="user-work">
        <el-row type="flex" class="row-work1">
          <!-- <el-table
          :data="dialogTableData"
          border
          style="width: 100%"
          :header-cell-style="{color:'#333744',background:'rgb(243, 246, 251)',textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="da"
            label="日期"
          />
          <el-table-column
            prop="total"
            label="总工单数"
          />
          <el-table-column
            prop="cancelCount"
            label="拒绝工单"
          />
          <el-table-column
            prop="workCount"
            label="完成工单"
          />
          <el-table-column
            prop="progressTotal"
            label="进行中工单"
          />
        </el-table> -->
          <el-col class="item-col" :span="5">&nbsp;</el-col>
          <el-col class="item-col" :span="5">总工单数</el-col>
          <el-col class="item-col" :span="5">拒绝工单</el-col>
          <el-col class="item-col" :span="5">完成工单</el-col>
          <el-col class="item-col" :span="5">进行中工单</el-col>
        </el-row>
        <el-row type="flex">
          <el-col class="item-col" :span="5">本周</el-col>
          <el-col class="item-col" :span="5">{{ weekData.total }}</el-col>
          <el-col class="item-col" :span="5">{{ weekData.cancelCount }}</el-col>
          <el-col class="item-col" :span="5">{{ weekData.progressTotal }}</el-col>
          <el-col class="item-col" :span="5">{{ weekData.workCount }}</el-col>
        </el-row>
        <el-row type="flex">
          <el-col class="item-col" :span="5">本月</el-col>
          <el-col class="item-col" :span="5">{{ monthData.total }}</el-col>
          <el-col class="item-col" :span="5">{{ monthData.cancelCount }}</el-col>
          <el-col class="item-col" :span="5">{{ monthData.progressTotal }}</el-col>
          <el-col class="item-col" :span="5">{{ monthData.workCount }}</el-col>
        </el-row>
        <el-row type="flex">
          <el-col class="item-col" :span="5">本年</el-col>
          <el-col class="item-col" :span="5">{{ yearData.total }}</el-col>
          <el-col class="item-col" :span="5">{{ yearData.cancelCount }}</el-col>
          <el-col class="item-col" :span="5">{{ yearData.progressTotal }}</el-col>
          <el-col class="item-col" :span="5">{{ yearData.workCount }}</el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import { searchUserWorkAPI, getUserWorkDetailAPI, getUserWorkCountAPI } from '@/api/workNum'
import moment from 'moment'
// 获取角色列表
import { getRolesAPI } from '@/api/people'
export default {
  components: {
    SearchBar
  },
  data() {
    return {
      value: '',
      // 表格数据
      tableData: [],
      // 页数
      pageConfig: {
        pageIndex: 1,
        pageSize: 10
      },
      // 总页数
      total: null,
      loading: false,
      // dialog数据
      formData: {},
      // 控制模态框是否显示
      showDialog: false,
      // 弹窗表格数据
      // dialogTableData: [],
      // 用户个人信息
      userInfo: {},
      searchName: '',
      // 角色下拉数据
      roleList: [],
      // 现在时间
      startDate: '',
      // 本周时间
      startWeek: '',
      // 本月时间
      startMonth: '',
      // 本年时间
      startYear: '',
      // 获取的本周数据
      weekData: {},
      // 获取的本月数据
      monthData: {},
      // 获取的本年数据
      yearData: {}

    }
  },
  created() {
    this.getUserWork()
    this.getRoles()
  },
  methods: {
    // 获取人员工作列表数据
    async  getUserWork() {
      this.loading = true
      const res = await searchUserWorkAPI(this.pageConfig)
      this.tableData = res.data.currentPageRecords.map((item, index) => {
        return {
          ...item, index: (this.pageConfig.pageIndex - 1) * this.pageConfig.pageSize + index + 1
        }
      })
      this.total = +res.data.totalCount
      this.loading = false
      // console.log(this.tableData)
    },
    // 获取角色列表数据
    async getRoles() {
      const res = await getRolesAPI()
      this.roleList = res.data
    },
    // 页码改变触发
    currentChange(newPage) {
      // 设置最新页码参数
      this.pageConfig.pageIndex = newPage
      // 重新获取数据列表，并展示第newPage页面的数据列表中的内容
      this.getUserWork()
    },
    //  搜索人员信息
    async  searchUserPeople() {
      // 输入框
      const res = await searchUserWorkAPI({ pageIndex: 1, pageSize: 10000, userName: this.searchName, isRepair: this.value })
      this.tableData = res.data.currentPageRecords.map((item, index) => {
        return {
          ...item, index: (this.pageConfig.pageIndex - 1) * this.pageConfig.pageSize + index + 1
        }
      })
      // 运营下拉运维下拉
      const res2 = await searchUserWorkAPI({ pageIndex: 1, pageSize: 10000, isRepair: this.value })
      this.tableData = res2.data.currentPageRecords.map((item, index) => {
        return {
          ...item, index: (this.pageConfig.pageIndex - 1) * this.pageConfig.pageSize + index + 1
        }
      })
    },
    // 关闭弹窗
    closeDialog() {
      this.showDialog = false
    },
    // 弹窗查看详情
    async  ViewDetails(id) {
      this.getUserWorkTime()
      const res = await getUserWorkDetailAPI(id)
      this.userInfo = res.data
      this.showDialog = true
      // 本周数据
      const weekParams = {
        userId: id,
        start: this.startWeek,
        end: this.startDate
      }
      const resWeek = await getUserWorkCountAPI({ ...weekParams })
      this.weekData = resWeek.data
      // 本月数据
      const monthParams = {
        userId: id,
        start: this.startMonth,
        end: this.startDate
      }
      const resMonth = await getUserWorkCountAPI({ ...monthParams })
      this.monthData = resMonth.data
      // 本年数据
      const yearParams = {
        userId: id,
        start: this.startYear,
        end: this.startDate
      }
      const resYear = await getUserWorkCountAPI({ ...yearParams })
      this.yearData = resYear.data
      // 追加进dialogTableData
      // this.dialogTableData.push(weekData)
      // this.dialogTableData.push(monthData)
      // this.dialogTableData.push(yearData)
      // console.log(this.dialogTableData)
    },
    // 获取用户工作时间
    getUserWorkTime() {
      // 现在时间
      this.startDate = moment().format('YYYY-MM-DD HH:mm:ss')
      // console.log('现在时间' + this.startDate)
      // 4.10
      this.startWeek = moment().startOf('week').add(1, 'days').format('YYYY-MM-DD HH:mm:ss')
      // console.log('本周时间' + this.startWeek)
      // 本月4.1
      this.startMonth = moment().month(moment().month()).startOf('month').format('YYYY-MM-DD HH:mm:ss')
      // console.log('本月时间' + this.startMonth)
      // 本年
      this.startYear = moment().year(moment().year()).startOf('year').format('YYYY-MM-DD HH:mm:ss')
      // console.log('本年时间' + this.startYear)
    }

  }

}
</script >

<style lang="scss" scoped>
.searchBOX {
  display: flex;
}
.el-form-item__content {
  display: flex;
  margin-left: 10px;
}
.detailsBox {
  background-color:rgb(243, 246, 251) ;
  padding: 10px;
  margin-bottom: 15px;
  .detailBox {
    padding: 6px;
  }
}
.user-work {
  border-top: 1px solid #d8dde3;
    border-left: 1px solid #d8dde3;
  .row-work1 {
    background-color: rgb(247, 248, 253);
  }
  .item-col {
    line-height: 40px;
    border-right: 1px solid #d8dde3;
    border-bottom: 1px solid #d8dde3;
    text-align: center;
  }
}

</style>
